import React, { Component } from 'react'
import { NavBar } from "antd-mobile";
import Search from "../search/search"
import "./cation.css"
import myaxios from "../utils/myaxios"
import { withRouter } from "react-router-dom"

 class cation extends Component {
    state={
        Menu:[], //返回的菜单内容
        categories:[], //右边返回的渲染内容
        select_index:0, //渲染的第几个
    };
    handleIemClick=(e) => {
        // getAttribute呐某个属性的值
       let select_index=e.target.getAttribute("date-index")
        this.setState({
            select_index:parseInt(select_index),
            categories:this.state.Menu[select_index].children
        })
    }
    // 商品详情页
    handetailsClick=(e) => {
        let tz=e.target.getAttribute("date-index")
        console.log(tz)
        this.props.history.push("/details/" + tz)
        
    }
    
    
    componentDidMount(){
        myaxios.get("categories").then(res=>{
            console.log(res)
            // 把请求到的数据保存到本地 
            let categories_cache={
                // 获取到当前的时间戳，是以毫秒结算
                data:Date.now(),
                categories:res
            }
            
            localStorage.setItem("categories",JSON.stringify(categories_cache)) //把这个变成字符串类型
            this.setState({
                Menu:res,
                categories:res[0].children
            })
        })
    }
    render() {
        return (
            <div className="cation">
                <div className="yg-index-nav">
                    <NavBar className="index-nav">商品分类</NavBar>
                </div>
                 {/* 搜索 */}
                    <div className="Search">
                      <Search></Search>
                    </div>
                {/* 菜单导航 */}
                <div className="Menu-navigation-bar">
                    {/* 菜单左边 */}
                    <div className="Menu-navigation-left" onClick={this.handleIemClick}>
                         {
                             this.state.Menu.map((v,index)=>{
                                 return <div className={ this.state.select_index===index?"active navigation-left-item":"navigation-left-item"}
                                         key={v.cat_id} 
                                         date-index={index}
                                         >
                                    {v.cat_name}
                                 </div>
                             })
                         }
                    </div>
                      {/* 菜单右边 */}
                      <div className="Menu-navigation-reight">
                         {this.state.categories.map(v=>{
                             return <div className="navigation-reight-item" key={v.cat_id} >
                                 {/* 二级标题 */}
                                 <div className="navigation-reight-item-er"> {"/"+v.cat_name+"/"}</div>
                                {/* 三级菜单 */}
                                <div className="navigation-reight-item-san" onClick={this.handetailsClick}>
                                    {v.children.map((v,index)=>{
                                        return <div className="navigation-reight-item-san-list" key={v.cat_id} >
                                            <img alt="" src={v.cat_icon} date-index={index}></img>
                                            <span>{v.cat_name}</span>
                                        </div>
                                    })}
                                </div>
                             </div>
                         })}
                      </div>
                </div>
            </div>
        )
    }
}

export default withRouter(cation)